<template>
	<view class="">
	<tn-nav-bar fixed :bottomShadow="false">私信</tn-nav-bar>

			<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
						    <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback"> 
						

			<view class="tn-search-fixed">
			  <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
			    <view class="justify-content-item align-content-item">
			      <view class="tn-bg-gray--light tn-flex tn-flex-col-center" style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 100%;">
			        <text class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
			        <input class="justify-content-item" type="number" placeholder="输入ID号" v-model="searchKey" placeholder-style="color:#AAAAAA" ></input>
			      </view>
			    </view>
			    
			    <view class="align-content-item">
			      <view class="justify-content-item tn-text-center" @click="sousuo(1)">
			        <tn-button fontColor="#ffffff"  backgroundColor="rgb(0, 197, 155)"   shape="round" padding="20rpx 20rpx" width="150rpx"  fontBold >
			          <text >搜索</text>
			        </tn-button>					
			      </view>
			    </view>
				
				<view class="align-content-item" v-if="">
				  <view class="justify-content-item tn-text-center" @click="sousuo(2)">
				    <tn-button fontColor="#ffffff"  backgroundColor="rgb(182, 182, 182)"   shape="round" padding="20rpx 20rpx" width="150rpx"  fontBold >
				      <text>重置</text>
				    </tn-button>					
				  </view>
				</view>
			  </view>
			</view>

<view class="empty__item" v-if="content.length==0&&tokenlogin" style="margin-top: 100px;"
							@click="guangchang()">
							<tn-empty icon="/static/images/no.png" text="你还没有任何消息,">
							
							</tn-empty>
						</view>
						<view class="message tn-padding" v-for="(item,index) in content" :key="index">

							<view class="message__left" @click="jinru(item,index)">
								<tn-avatar :badge="item.is_manage_normal" badgeText="管" :badgePosition="[8,20]"
									badgeBgColor="#00aa00" size="lg" shape="circle" :src="item.head_url">
								</tn-avatar>
							</view>
							<view class="message__middle" @click="jinru(item,index)">
								<view class="message__name">{{item.username}}
									<text class="tn-icon-sex  tn-color-gray" v-if="item.sex==0"></text>
									<text class="tn-icon-sex-female tn-color-purplered" v-if="item.sex==2"></text>
									<text class="tn-icon-sex-male  tn-color-blue" v-if="item.sex==1"></text>
									<text class="dk-lv tn-main-gradient-indigo--light"
										v-if="item.vip==0&&configInfo.is_lv">LV {{item.lv}}</text>
									<text class="dk-vip tn-main-gradient-orangeyellow" v-if="item.vip==1"><text
											class="tn-icon-vip tn-color-black"
											style="font-size: 14px;margin-left: -5px;"></text>VIP{{item.vip_lv}}</text>

								</view>
								<view class="message__content tn-text-ellipsis" v-if="item.type=='text'">
									{{item.content}}
								</view>
								<view class="message__content tn-text-ellipsis" v-if="item.type=='music'">语音
								</view>
								<view class="message__content tn-text-ellipsis" v-if="item.type=='image'">图片
								</view>
								<view class="message__content tn-text-ellipsis" v-if="item.type=='liwuuser'">礼物
								</view>

							</view>
							<view class="message__right" style="width: 14%;">
								<view class="message__time">{{$common.timeToDate(item.time)}}</view>
								<view class="message__tips" v-if="item.unread>0">
									<tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle"
										width="auto" size="sm">{{item.unread}}</tn-tag>
								</view>
							</view>

						</view>



		

					<!-- 登录框组件 -->



				</mescroll-body>

	
</view>


	</view>
</template>


<script>
	const audioContext = uni.createInnerAudioContext()
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		name: 'TemplateGroup',
		mixins: [template_page_mixin, MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				searchKey:'',
				qunshow: false,
				msglist: [],
				content_qun: [],
				activeItemStyle: {
					fontSize: `32rpx`
				},
				current: 0,
				currenttiezi: 0,
				scrollList: [{
						name: '消息'
					},
					{
						name: '我的群',
					}
				],
				daojushow: false,
				daojutitle: '',
				daojuid: 0,
				daojulist: [],
				options1: [{
					text: '拉黑',
					style: {
						backgroundColor: '#000000'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#E83A30'
					}
				}],
				loginBoxFlag: false, // 登录框显示隐藏状态
				show_fabu: false,
				cardCur: 0,
				content: [],
				userlist: [],
				tokenlogin: ''
			}
		},

		onPullDownRefresh() {
			this.mescroll.resetUpScroll();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		onTabItemTap(e) {
			if (e.index == 3) {
				setTimeout(() => {
					this.msgconut()
					this.mescroll.resetUpScroll();
				}, 600);
			}

		},




		mounted() {
			let that = this
			this.tokenlogin = uni.getStorageSync('token')

			uni.$off('setLoginBoxFlag_preferred');
			uni.$on('setLoginBoxFlag_preferred', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});




			// 注册接受消息监听
			uni.$on('listMessage', (message) => {
				if (message.type == 'text' || message.type == 'liwuuser' || message.type == 'mp3' || message
					.type == 'image') {
					setTimeout(() => {
						that.mescroll.resetUpScroll();
						let ling = uni.getStorageSync('lingsheng')
						console.log(ling)
						if (!ling) {
							that.paymp3('/static/shou.mp3', 0)
						}
					}, 2000);
				}

			});
		

		},

		methods: {
			sousuo(type){
				if (type==2){
					this.searchKey=''
				}
				this.mescroll.resetUpScroll();
			},
			paymp3(url, id = 0) {
				console.log(53454)
				let that = this
				audioContext.src = url
				audioContext.play()
				audioContext.onPlay(() => {})

			},
		

		
			//点击单行
			itemClick(data) {
				console.log('点击', data)
			},
			//拉黑
			del(data) {
				this.onSwiperItemClick(data, 2)
			},
			//删除
			edit(data) {
				this.onSwiperItemClick(data, 1)
			},

			guangchang() {
				uni.switchTab({
					url: '/pages/circle/circle'
				})
			},
			async onSwiperItemClick(e) {
				if (e.index > -1) {
					let that = this;
					let result = await that.$request({
						loading: 0,
						method: 'post',
						url: '/chat/chat/delChatLog',
						data: {
							id: e.name_id,
							status: e.index + 1
						}
					});
					if (result.statusCode == 200) {
						if (result.data.code == 200) {
							this.content.splice(e.name, 1);
							//	that.mescroll.resetUpScroll();

						}
					}

				}

			},

			async onSwiperItemClick111(e, type) {
				if (e.paixu > -1) {
					let that = this;
					let result = await that.$request({
						loading: 0,
						method: 'post',
						url: '/chat/chat/delChatLog',
						data: {
							id: e.id,
							status: type
						}
					});

					if (result.statusCode == 200) {
						if (result.data.code == 200) {
							this.content.splice(e.name, 1);
						}
					}

				}

			},

		
			denglu() {
				console.log(333)
				this.loginBoxFlag = true
			},

			refreshFn() {
				console.log('登录返回')
				this.mescroll.resetUpScroll();
			},


		

		jinru(item, index) {
			console.log(item)
			uni.$emit('jianshacount', item.unread)
			this.content[index].unread = 0
			this.navigateToFn({
				url: '/mineMixinPages/chat/talk?toid=' + item.toid + '&toname=' + item.username,
				checkLogin: true
			})
		},
			/// 列表调用
			downCallback(mescroll) {
				mescroll.endSuccess();
				mescroll.resetUpScroll();
			},
			async upCallback(mescroll) {
				let that = this;
				if (!uni.getStorageSync('token')) {

					mescroll.endErr()
					return
				}

				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/chat/get_list',
					data: {
						keys:this.searchKey,
						id: that.id,
						page: mescroll.num
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						if (mescroll.num == 1) {
							that.content = result.data.data.data;

							if (result.data.data.data.length == 0) {
								mescroll.endErr()
								return

							}

						} else {
							that.content = that.content.concat(result.data.data.data);
						}
						mescroll.endSuccess(result.data.data.data.length, result.data.data.data.length >= mescroll
							.size);
						uni.setStorageSync('chatlist', that.content)





					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},










			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},


			setPermissions() {
				// #ifdef APP-PLUS  
				if (plus.os.name == 'Android') { // 判断是Android
					var main = plus.android.runtimeMainActivity();
					var pkName = main.getPackageName();
					var uid = main.getApplicationInfo().plusGetAttribute("uid");
					var NotificationManagerCompat = plus.android.importClass(
						"android.support.v4.app.NotificationManagerCompat");
					//android.support.v4升级为androidx
					if (NotificationManagerCompat == null) {
						NotificationManagerCompat = plus.android.importClass(
							"androidx.core.app.NotificationManagerCompat");
					}
					var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();
					// 未开通‘允许通知’权限，则弹窗提醒开通，并点击确认后，跳转到系统设置页面进行设置  
					if (!areNotificationsEnabled) {
						uni.showModal({
							title: '通知权限开启提醒',
							content: '您还没有开启通知权限，无法接受到消息通知，请前往设置！',
							showCancel: false,
							confirmText: '去设置',
							success: function(res) {
								if (res.confirm) {
									var Intent = plus.android.importClass('android.content.Intent');
									var Build = plus.android.importClass("android.os.Build");
									//android 8.0引导  
									if (Build.VERSION.SDK_INT >= 26) {
										var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
										intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
									} else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0  
										var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
										intent.putExtra("app_package", pkName);
										intent.putExtra("app_uid", uid);
									} else { //(<21)其他--跳转到该应用管理的详情页  
										intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
										var uri = Uri.fromParts("package", mainActivity.getPackageName(),
											null);
										intent.setData(uri);
									}
									// 跳转到该应用的系统通知设置页  
									main.startActivity(intent);
								}
							}
						});
					}
				} else if (plus.os.name == 'iOS') { // 判断是ISO
					var isOn = undefined;
					var types = 0;
					var app = plus.ios.invoke('UIApplication', 'sharedApplication');
					var settings = plus.ios.invoke(app, 'currentUserNotificationSettings');
					if (settings) {
						types = settings.plusGetAttribute('types');
						plus.ios.deleteObject(settings);
					} else {
						types = plus.ios.invoke(app, 'enabledRemoteNotificationTypes');
					}
					plus.ios.deleteObject(app);
					isOn = (0 != types);
					if (isOn == false) {
						uni.showModal({
							title: '通知权限开启提醒',
							content: '您还没有开启通知权限，无法接受到消息通知，请前往设置！',
							showCancel: false,
							confirmText: '去设置',
							success: function(res) {
								if (res.confirm) {
									var app = plus.ios.invoke('UIApplication', 'sharedApplication');
									var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
									plus.ios.invoke(app, 'openURL:', setting);
									plus.ios.deleteObject(setting);
									plus.ios.deleteObject(app);
								}
							}
						});
					}
				}
				// #endif  

			}

		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background-image: repeating-linear-gradient(177deg, #D5FAF2, #D5FAF2);
	}

	.template-hot {}

	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 60rpx;
				height: 60rpx;
				font-size: 40rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;



				}
			}
		}
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	.message {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;

		&__left {
			width: 13%;
		}

		&__middle {
			width: 75%;
			padding-left: 20rpx;
			padding-right: 40rpx;
		}

		&__right {
			width: 12%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		&__name {
			font-size: 32rpx;
			margin-bottom: 8rpx;
		}

		&__content {
			font-size: 26rpx;
			color: #838383;
		}

		&__tips {
			&__icon {
				font-size: 36rpx;
				color: #AAAAAA;
			}
		}
	}


	.yihang {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.wangge {
		/* grid布局 两端对齐,最后一行左对齐*/
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 30rpx;
		margin-top: 30rpx;
	}
</style>